<template>
  <div class="home">
    <div class="card mb10">
      <div class="hond">
        <div class="title">常用功能</div>
      </div>
      <el-row :gutter="10">
        <el-col :span="4" v-for="item in menuList" :key="item.id">
          <div class="menu-item pointer mb30" @click="toRoute(item.path)">
            <div class="icon-box" :style="randomRgb()">
              <el-icon size="42" color="#fff"><Menu /></el-icon>
            </div>
            <el-text class="mt10">{{ item.title }}</el-text>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="menu-item pointer" @click="openShortcutMenuDialog()">
            <div class="icon-box" style="background: var(--el-color-primary)">
              <el-icon size="42" color="#fff"><Plus /></el-icon>
            </div>
            <el-text class="mt10">编辑常用功能</el-text>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="card mb10">
      <div class="hond">
        <div class="title">经营概况</div>
        <!-- <div class="para-text">更新时间</div> -->
      </div>
      <el-row :gutter="10">
        <el-col :span="4" v-for="operate in homData.businessOverview" :key="operate.value">
          <div class="operate-item">
            <text class="fsize14 text-assist-color">{{ operate.title }}</text>
            <text class="fsize26 mt10">{{ operate.value }}</text>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="card mb10">
      <div class="hond">
        <div class="title">核心数据</div>
        <!-- <div class="para-text">统计周期</div> -->
      </div>
      <el-row :gutter="10">
        <el-col :span="8" v-for="core in homData.coreData" :key="core.value">
          <div class="core-item">
            <text class="fsize14">{{ core.title }}</text>
            <text class="fsize20 mt10">{{ core.value }}</text>
            <!-- <text class="fsize14 text-assist-color">30日前总会员数:无权限环比无权限</text> -->
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="card mb10">
      <div class="hond">
        <div class="title">营业对比</div>
      </div>
      <div class="height500"><ECharts :option="ecOption" /></div>
    </div>
    <ActivationDialog ref="activationRef" />
    <ShortcutMenuDialog ref="shortcutMenuDialogRef" />
  </div>
</template>

<script setup lang="ts" name="home">
import { onMounted, computed, ref } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/modules/user";
import ActivationDialog from "@/layouts/components/Header/components/ActivationDialog.vue";
import ShortcutMenuDialog from "@/views/home/ShortcutMenuDialog.vue";
import { getUserCommonList, setUserCommon, getUserMenuList, getStoreStatistic } from "@/api/modules/system";
import { ECOption } from "@/components/ECharts/config";
import ECharts from "@/components/ECharts/index.vue";
const router = useRouter();
const userStore = useUserStore();
const activation = computed(() => userStore.activation);
const activationRef = ref<InstanceType<typeof ActivationDialog> | null>(null);
const shortcutMenuDialogRef = ref<InstanceType<typeof ShortcutMenuDialog> | null>(null);

const openShortcutMenuDialog = () => {
  const params = {
    isView: false,
    list: menuList,
    getApi: getUserMenuList,
    api: setUserCommon,
    getTableList: getHomeData
  };
  shortcutMenuDialogRef.value?.acceptParams(params);
};

const menuList = ref<any>([]);
const homData = ref<any>({});
const getHomeData = async () => {
  try {
    const [menus, statistics]: [any, any] = await Promise.all([getUserCommonList(), getStoreStatistic()]);
    menuList.value = menus.data;
    homData.value = statistics.data;
    ecOption.value = {
      grid: {
        left: "1%",
        right: "1%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          data: statistics.data.trendChar.map((im: any) => im.day.slice(0, 10)),
          axisLabel: {
            color: "#a1a1a1",
            rotate: 20
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            color: "#a1a1a1"
          }
        }
      ],
      series: [
        {
          name: "Direct",
          type: "bar",
          emphasis: {
            focus: "series"
          },
          color: "#9de0ff ",
          label: {
            show: true, // 是否显示
            position: "top" // 数值显示的位置
          },
          data: statistics.data.trendChar.map((im: any) => im.amount)
        },
        {
          data: statistics.data.trendChar.map((im: any) => im.amount),
          type: "line",
          color: "#ffa897"
        }
      ]
    };
  } catch (err) {
    console.log(err);
  }
};
const randomRgb = () => {
  let R = Math.floor(Math.random() * 130 + 110);
  let G = Math.floor(Math.random() * 130 + 110);
  let B = Math.floor(Math.random() * 130 + 110);
  return {
    background: "rgb(" + R + "," + G + "," + B + ")"
  };
};

const toRoute = (RoueUrl: string) => {
  router.push(RoueUrl);
};

const ecOption: any = ref({});

onMounted(() => {
  if (activation.value.isOutDate) {
    activationRef.value?.openDialog();
  }
  getHomeData();
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
